<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword" type="password" :prefix-icon="Lock" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" type="password" :prefix-icon="Lock" show-password />
      </el-form-item>
      <el-form-item label="确认新密码" prop="newPassword2">
        <el-input v-model.number="ruleForm.newPassword2" :prefix-icon="Lock" show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
defineOptions({
  name: 'PasswordDialog',
})
import { ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'
import { AuthApi } from '@/api/auth'

const ruleFormRef = ref<FormInstance>()

const validateOldPassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}
const validateNewPassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}

const validateNewPassword2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else if (value != ruleForm.newPassword) {
    callback(new Error(`两次输入的密码不一致!`))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  oldPassword: '',
  newPassword: '',
  newPassword2: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  oldPassword: [{ validator: validateOldPassword, trigger: 'blur' }],
  newPassword: [{ validator: validateNewPassword, trigger: 'blur' }],
  newPassword2: [{ validator: validateNewPassword2, trigger: 'blur' }],
})

/** 确认修改密码 */
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  formEl.validate(valid => {
    if (valid) {
      ElMessageBox.confirm('是否确认修改密码?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(async () => {
        await AuthApi.changePassword(ruleForm.oldPassword, ruleForm.newPassword)
        ElMessage.success('密码修改成功')
        dialogVisible.value = false
      })
    }
  })
}

/**重置 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  formEl.resetFields()
}

const dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
}

watch(dialogVisible, value => {
  if (value) {
    resetForm(ruleFormRef.value)
  }
})

defineExpose({ openDialog })
</script>
